<!DOCTYPE html>
<html>
 
<head>
  <meta charset="UTF-8">
  <title>Hello Electron!</title>
</head>
 
<body>
  <h3>
      <select id="sel_val">
        <option value="node" select='select'>node</option>
        <option value="electron">electron</option>
      </select>
      <input type="text" id="txt_val">
      <button type="button" onclick="getAbi()">GetABI</button>
      <button type="button" onclick="getTarget()">GetTarget</button>
      <div>
        ABI:<span id="span_abi_val"></span>
        TARGET:<span id="span_target_val"></span>
      </div>
      <div id="error" style="color:red"></div>
  </h3>
 
  <script>
    const nodeAbi = require('node-abi');
    const error = document.getElementById('error');
    const sel = document.getElementById('sel_val');
    const txt = document.getElementById("txt_val");
    function getAbi(){
      try{
          error.innerHTML = "";
          const val = nodeAbi.getAbi(txt.value, sel.value);
          document.getElementById('span_abi_val').innerHTML = val;
        }
        catch(ex){
            error.innerHTML = ex.message
        }
    }
    function getTarget(){
        try{
          error.innerHTML = "";
          const val = nodeAbi.getTarget(txt.value, sel.value)
          document.getElementById('span_target_val').innerHTML = val;
        }
        catch(ex){
            error.innerHTML = ex.message
        }
    }
  </script>
</body>
 
</html>